<template>
    <div class="model-page">
        <!-- 头部操作栏 -->
        <header class="model-header">
            <div class="header-lf">
                <span> 基于Three.js+Vue3+Element-Plus开发的3d模型可视化编辑系统 </span>
            </div>
            <div class="header-lr">
                <el-space>
                    <el-button type="primary" icon="Film" @click="$router.push({ path: '/modelBase' })"> 模型库
                    </el-button>
                    <el-button type="primary" icon="Document" v-if="handleConfigBtn"
                        @click="onSaveConfig">保存数据</el-button>
                    <el-button type="primary" icon="View" v-if="handleConfigBtn" @click="onPrivew">效果预览</el-button>
                    <el-dropdown trigger="click">
                        <!-- el-dropdown 下拉菜单的容器 -->
                        <el-button type="primary" icon="Download"> 下载/导出<el-icon class="el-icon--right"></el-icon>
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="onDownloadCover">下载封面</el-dropdown-item>
                                <el-dropdown-item @click="onExportModleFile('glb')">导出模型(.glb)格式</el-dropdown-item>
                                <el-dropdown-item @click="onExportModleFile('gltf')">导出模型(.gltf)格式</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <el-button type="primary" icon="HelpFilled" v-if="handleConfigBtn" @click="onImportantCode"> 嵌入代码
                    </el-button>
                    <el-button type="primary" icon="FullScreen" @click="onFullScreen">
                        {{ fullscreenStatus ? "取消全屏" : "全屏" }}
                    </el-button>
                </el-space>
            </div>
        </header>
        <div class="model-container">
            <!-- 模型列表 -->

            <!-- "choosePanel" 是给这个 <model-choose> 组件实例分配的引用名,通过这个引用名,
        可以在Vue实例的方法、计算属性或其他地方通过 this.$refs.choosePanel 访问到这个 <model-choose> 组件的实例 -->
            <model-choose ref="choosePanel"></model-choose>

            <!-- 模型视图 -->
            <div id="model" @drop="onGeometryDrop" ref="model" @dragover.prevent>
                <div class="camera-icon">
                    <el-tooltip effect="dark" content="居中" placement="top">
                        <el-icon :size="18" color="#fff" @click="onResetCamera">
                            <Aim />
                        </el-icon>
                    </el-tooltip>
                </div>
                <div id="mesh-txt"></div>
            </div>

            <!-- 右侧编辑栏 -->
            <div class="edit-panel" :style="{ minWidth: '380px' }">
                <model-edit-panel ref="editPanel" v-if="store.modelApi.model"></model-edit-panel>
            </div>
        </div>

        <page-loading :loading="loading" :percentage="progress"></page-loading>
        <!-- 嵌入代码弹框 -->
        <implant-code-dialog ref="implatDialog"></implant-code-dialog>
    </div>
</template>

<script setup name="modelEdit">
import { ModelChoose } from "@/components/index";
import { useMeshEditStore } from "@/store/meshEditStore";
import { useRouter } from "vue-router";
import { onMounted, ref, getCurrentInstance, onBeforeUnmount, computed } from "vue";

const store = useMeshEditStore();
const router = useRouter();
const { $bus, $local } = getCurrentInstance().proxy;

const choosePanel = ref(null);
const editPanel = ref(null);


</script>

<style lang="scss" scoped>
.model-page {
    width: 100%;
    background-color: #1b1c23;

    .model-header {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 35px;
        padding: 0 10px;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        text-shadow: 5px 3px 5px #c11212;
        background-color: #010c1d;
        box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
    }

    .model-container {
        display: flex;

        #model {
            position: relative;
            width: calc(100% - 630px);
            height: calc(100vh - 35px);

            .camera-icon {
                position: absolute;
                top: 10px;
                left: calc(100% - 50%);
                cursor: pointer;
            }
        }
    }
}
</style>

<style lang="scss">
.edit-box {
    height: calc(100vh - 79px);
}

.edit-box,
.model-choose {
    .header {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 35px;
        padding: 0 20px;
        color: #cccccc;
        background-color: #33343f;
        border-top: 1px solid #1b1c23;
        border-bottom: 1px solid #1b1c23;
    }

    .disabled {
        pointer-events: none;
        opacity: 0.3;
    }

    .options {
        box-sizing: border-box;
        max-width: 380px;
        background-color: #1b1c23;

        .option-active {
            background-color: #27282f;
        }

        .space-between {
            justify-content: space-between;
        }

        .option {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            height: 33px;
            padding: 0 18px;
            font-size: 14px;
            color: #cccccc;
            cursor: pointer;

            .icon-name {
                display: flex;
                align-items: center;
            }
        }
    }
}

.el-input-number {
    width: 90px !important;
}
</style>
